<template>
  <form-item-container
    v-if="permission !== 'H'"
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @select-item="selectItem"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-space :direction="config.direction">
      <a-checkbox
        v-if="config.checkAll"
        :model-value="checkedAll"
        :indeterminate="indeterminate"
        @change="handleChangeAll"
      >
        全选
      </a-checkbox>
      <a-checkbox-group
        v-model="formModel"
        :disabled="permission === 'D'||permission === 'R'"
        :default-value="config.defaultValue"
        :direction="config.direction"
        :max="config.max"
        :options="config.options"
        @change="onChange"
      >
      </a-checkbox-group>
    </a-space>
  </form-item-container>
</template>

<script lang="ts" setup>
import { ref, inject, defineModel, defineProps, defineEmits, watch, computed } from 'vue';
import { FormPermission } from '@/components/form-design/item-select/config/type';
import FormItemContainer from '@/components/form-design/form-container/container-item/form-item-container.vue';

const formModel = defineModel({ type: [] });

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formInstance = inject('formInstance');

const formPermission = inject<any>('formPermission');

const permission = computed<FormPermission>(() => {
  const result = formPermission[props.id];
  if (result) {
    return result;
  }
  return 'E';
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const indeterminate = ref(false);
const checkedAll = ref(false);

const selectItem = (value: any) => {
  emits('selectItem', props.item);
};

const deleteItem = (value: any) => {
  emits('deleteItem', props.item);
};

const copyItem = (value: any) => {
  emits('copyItem', props.item);
};

const handleChangeAll = (value: boolean) => {
  indeterminate.value = false;
  if (value) {
    checkedAll.value = true;
    formModel.value = props.config.options.map((item: { value: any; }) => item.value);
  } else {
    checkedAll.value = false;
    formModel.value = [];
  }
};

const onChange = (value: string) => {
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, value);
    } catch (e) {
      console.error(e);
    }
  }
};

watch(
  () => formModel.value,
  (value) => {
    if (value && value.length) {
      if (value.length === props.config.options.length) {
        checkedAll.value = true;
        indeterminate.value = false;
      } else {
        checkedAll.value = false;
        indeterminate.value = true;
      }
    } else {
      checkedAll.value = false;
      indeterminate.value = false;
    }
  }
);

</script>

<script lang="ts">
export default {
  name: 'FormItemCheckBox'
};
</script>

<style lang="less" scoped>

</style>